<template>
    <div class="with-bar" id="app" :class="{'page-loading':page.status == 0}">
        <scroll-fixed>
            <a href="javascript:;" @click="appDownload" class="app-download" :class="{'hide':hideDownload}">
                <div class="app-logo">
                    <img src="../../assets/app_logo.png"> 泛亚资讯
                </div>
                <span>打开</span>
            </a>
            <page-bar>
                <router-link to="/search" slot="left">
                    <i class="uicon uicon-search-dark"></i><span>发现</span>
                </router-link>
                <p slot="middle">广场</p>
                <router-link to="/create" slot="right" >
                    <i class="uicon uicon-publish"></i><span>发布</span>
                </router-link>
            </page-bar>
        </scroll-fixed>
        
        <scroll-list v-if="page.status==1" ref="scroll" class="ui-list" :disabled="true" :config="scroll" @bottom="loadmore">
            <transition-group class="index-list" name="list">
                <square-item 
                    v-for="(item,index) in list" 
                    @delete="delItem(item,index)"
                    @item-share="share(item)" 
                    :item="item" 
                    :key="item.id"/>
            </transition-group>
        </scroll-list>
        <ui-loading v-else-if="page.status == 0">
            <div slot="content"></div>
        </ui-loading>
        <page-error v-else @refresh="pageRefresh"></page-error>

        <ui-tab-bar :active="page.tabBarActive" @change="tabChange"></ui-tab-bar>
        
        <popup-more :status="moreConfig.status" :config="moreConfig" @close="moreConfig.status = false"></popup-more>
        <slide-tool ref="slide" />

    </div>
</template>
<script>
import scrollFixed from "@/components/scrollFixed.vue";
import pageBar from "@/components/pagebar.vue";
import ScrollList from "@/components/scrollList.vue";
import items from "@/square/components/items.vue";
import MoreBox from '@/components/morebox.vue'
import pageError from '@/components/pageError.vue'
import UILoading from '@/components/loading.vue'
import mxTabBar from "@/mixins/tabbar.js";
import mxSlide from "@/mixins/slide.js";
import Lazy from '@/plugins/lazy.js'

export default {
    name:'square-index',
    components: {
        [scrollFixed.name]: scrollFixed,
        [ScrollList.name]: ScrollList,
        [items.name]: items,
        [MoreBox.name]: MoreBox,
        [pageError.name]: pageError,
        [UILoading.name]: UILoading,
        [pageBar.name]: pageBar
    },
    mixins:[mxTabBar,mxSlide],
    data(){
        return  {
            cache_key:'SQUARE_LIST',
            lazy:new Lazy(),
            hideDownload:false,
            moreConfig:{
                id:'',
                status:false,
                fav:false,
                night:false,
                font:false,
                range:3,
                hideOption:true,
                email_title:'泛亚资讯 动态详情',
                email_content:' '
            },
            scroll:{
                pull:false,
                bottom:'hidden'
            },
            list:[],
            page: {
                status:0,
                tabBarActive:2,
                page_no: 1,
                page_size: 10,
                isEnd: false,
            }
        }
    },
    mounted(){
        this.$on("RELOADDATA", type => {
            this.page.page_no = 1;
            this.page.status = 0;
            this.page.is_end = false;
            this.scroll.bottom = false;

            let cache = this.$store.state.cache.map[this.cache_key];
            if(cache){
                this.page.page_no = cache.page_no;
                this.list = cache.list;
                
                this.scroll.bottom = this.list.length == 0 ? 'hidden' : (this.page.isEnd ? 'done' : false);
                this.page.status = 1;
                this.$nextTick(()=>{
                    setTimeout(()=>{
                        this.lazy.update();
                    },100)

                })
            }else{
                
                this.getList().then(()=>{
                    this.$nextTick(() => {
                        this.scroll.bottom = this.list.length == 0 ? 'hidden' : (this.page.isEnd ? 'done' : false);
                        setTimeout(()=>{this.lazy.update();},100)
                    });
                }).catch(e => {
                    this.page.status = -1;
                });
            }

        });

        !this.isApp && this.$on('SCROLL', (e, params) => {
            this.hideDownload = params.top >= params.height * 0.6;
        })

        this.$emit('RELOADDATA');
    },
    methods:{
        // mapMutation('cache',{
        //     cache_update:'update',
        //     cache_add:'add',
        //     cache_del:'del',
        // }),
        pageRefresh() {
            this.$emit("RELOADDATA");
        },
        pullLoad(){
            // 刷新页面
            this.$emit("RELOADDATA");
        },
        share(item){
            this.moreConfig.status = true;
            this.moreConfig.email_content = item.content;
        },
        getList() {
            return this.$http.get('?ct=member_publish&ac=dynamic_list&page_no=' + this.page.page_no + '&page_size=' + this.page.page_size)
                .then(response => {
                    let { data } = response;
                    if (data.code == 0) {
                        let res = data.data;
                        this.page.isEnd = !res.is_have_data;
                        this.list = this.list.concat(res.list);
                        this.page.page_no++;

                        this.$store.commit('add',{
                            key:this.cache_key,
                            value:{
                                active:'',
                                page_end:this.page.isEnd,
                                page_no:this.page.page_no,
                                list:this.list
                            }
                        });

                        this.page.status = 1;
                    }else{
                        this.$toast(data.msg);
                        this.page.status = -1;
                    }
                }).catch(e=>{
                    this.$toast('获取数据失败');
                })
                    
        },
        loadmore() {
            if (this.scroll.bottom || this.page.isEnd) return false;
            this.scroll.bottom = true;
            this.getList().then(()=>{
                this.$nextTick(() => {
                    this.lazy.update();
                    this.scroll.bottom = this.page.isEnd ? 'done' : false;
                });
            })
        },
        delItem(item,index){
            this.list.splice(index,1);
            this.$store.commit('deleteFieldByKey',{
                key:this.cache_key,
                field:'id',
                value:item.id
            });
        },
        appDownload(){
            location.href = this.$utils.app.link.open_circle

            setTimeout(()=>{
                if (this.$utils.app.ios) {
                    location.href = this.$utils.app.download.ios
                } else {
                    location.href = this.$utils.app.download.android
                }
            },2000);
        },
    }
}
</script>
<style lang="less">
.page-bar-left span,
.page-bar-right span {
    font-size:32px;
    color:#5a4640;
    margin-left:10px;
}
.page-bar-middle {
    font-size:36px;
    color:#282828;
}
</style>

